<template>
  <a-select :value="arrayValue" @change="onChange" mode="multiple" :placeholder="placeholder" allowClear>
    <a-select-option
      v-for="(item,index) in selectOptions"
      :key="index"
      :getPopupContainer="getParentContainer"
      :value="item.value">
      {{ item.text || item.label }}
    </a-select-option>
  </a-select>
</template>

<script>
//option {label:,value:}
import { getAction } from '@api/manage'

export default {
  name: 'JSelectMultiple',
  props: {
    placeholder: {
      type: String,
      default: '',
      required: false
    },
    value: {
      type: String,
      required: false
    },
    readOnly: {
      type: Boolean,
      required: false,
      default: false
    },
    options: {
      type: Array,
      default: () => [],
      required: false
    },
    triggerChange: {
      type: Boolean,
      required: false,
      default: false
    },
    spliter: {
      type: String,
      required: false,
      default: ','
    },
    popContainer: {
      type: String,
      default: '',
      required: false
    },
    dictCode: {
      type: String,
      required: false
    }
  },
  data() {
    return {
      arrayValue: !this.value ? [] : this.value.split(this.spliter),
      dictOptions: []
    }
  },
  computed: {
    selectOptions() {
      return this.dictOptions.length > 0 ? this.dictOptions : this.options
    }
  },
  watch: {
    value(val) {
      if (!val) {
        this.arrayValue = []
      } else {
        this.arrayValue = this.value.split(this.spliter)
      }
    }
  },
  mounted() {
    if (this.dictCode) {
      this.loadDictOptions()
    }
  },
  methods: {
    onChange(selectedValue) {
      if (this.triggerChange) {
        this.$emit('change', selectedValue.join(this.spliter))
      } else {
        this.$emit('input', selectedValue.join(this.spliter))
      }
    },
    getParentContainer(node) {
      if (!this.popContainer) {
        return node.parentNode
      } else {
        return document.querySelector(this.popContainer)
      }
    },
    // 根据字典code查询字典项
    loadDictOptions() {
      getAction(`/sys/dict/getDictItems/${this.dictCode}`, {}).then(res => {
        if (res.success) {
          this.dictOptions = res.result.map(item => ({ value: item.value, label: item.text }))
        } else {
          console.error('getDictItems error: : ', res)
          this.dictOptions = []
        }
      })
    }
  }

}
</script>
